<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单宝 - 使用教程</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: linear-gradient(to right, #0d6efd, #0091ff);
            color: white;
            border-radius: 8px;
        }

        .header img {
            width: 64px;
            height: 64px;
            margin-bottom: 16px;
        }

        h1 {
            margin: 0;
            font-size: 2em;
        }

        .subtitle {
            margin-top: 8px;
            opacity: 0.9;
        }

        .section {
            margin-bottom: 40px;
            background: white;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        h2 {
            color: #0d6efd;
            margin-top: 0;
        }

        .step {
            margin-bottom: 20px;
            padding-left: 24px;
            position: relative;
        }

        .step:before {
            content: "•";
            color: #0d6efd;
            font-size: 20px;
            position: absolute;
            left: 0;
        }

        .tip {
            background: #f8f9fa;
            padding: 16px;
            border-left: 4px solid #0d6efd;
            margin: 16px 0;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="images/icon128.png" alt="表单宝">
        <h1>表单宝使用教程</h1>
        <div class="subtitle">让填表变得简单而愉快</div>
    </div>

    <div class="section">
        <h2>基本功能</h2>
        <div class="step">
            <strong>快速填充：</strong>点击悬浮面板中的选项即可自动填充内容到输入框中。
        </div>
        <div class="step">
            <strong>分类管理：</strong>信息按类别整理，方便查找和使用。
        </div>
    </div>

    <div class="section">
        <h2>如何使用</h2>
        <div class="step">
            <strong>第一步：</strong>点击浏览器右侧的固定面板或点击工具栏图标。
        </div>
        <div class="step">
            <strong>第二步：</strong>点击任意输入框，面板会加载预设好的信息。
        </div>
        <div class="step">
            <strong>第三步：</strong>点击想要填充的内容，即可自动完成填充。
        </div>
        <div class="tip">
            提示：你可以通过点击面板右上角的按钮来最小化面板，需要时再次点击展开。
        </div>
    </div>

    <div class="section">
        <h2>个性化设置</h2>
        <div class="step">
            <strong>编辑信息：</strong>点击面板底部的"编辑预设信息"按钮，可以添加、修改或删除预设信息。
        </div>
        <div class="step">
            <strong>添加分类：</strong>在编辑界面中可以创建新的分类，更好地组织你的信息。
        </div>
        <div class="step">
            <strong>数据安全：</strong>所有数据都保存在本地，确保你的隐私安全。
        </div>
    </div>

    <div class="section">
        <h2>快捷操作</h2>
        <div class="step">
            <strong>展开/收起：</strong>点击分类标题可以展开或收起该分类下的内容。
        </div>
        <div class="step">
            <strong>快速定位：</strong>面板会自动匹配当前输入框最相关的内容。
        </div>
        <div class="step">
            <strong>一键重置：</strong>在编辑界面中可以快速恢复默认设置。
        </div>
    </div>
    <div class="section">
        <h2>安全声明</h2>
        <div class="step">
            <strong>本插件仅在当前浏览器页面中运行，不会收集任何用户数据。</strong>
        </div>
        <div class="step">
            <strong>所有数据都保存在本地，确保你的隐私安全。</strong>
        </div>
    </div>

    <div class="footer">
        Design by abin<br>
        如有问题或建议，欢迎反馈。当前版本 1.0.0
    </div>
</body>
</html> 